<!--
 * @Description: hello
 * @Author: rendc
 * @Date: 2024-07-09 09:25:59
 * @LastEditors: rendc
 * @LastEditTime: 2024-07-10 09:47:41
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 配置项 -->
  <!-- 编码方式 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 标签页的标题 -->
  <title>Hello</title>
  <!-- 图标 -->
  <!-- 外部样式表 -->
  <link rel="stylesheet" href="./hello.css">
</head>

<body>
  <!-- 内容区 -->
  <!-- 所有要展示在浏览器视口区的内容，都写到这里 -->
  hello,world!
  <!-- 块元素和行内元素 -->
  <div>块元素</div>
  <div>块元素</div>
  <div>块元素</div>
  <p>p标签</p>
  <p>p标签</p>
  <p>p标签</p>
  <a>a标签</a>
  <a>a标签</a>
  <a>a标签</a>
  <img src="" alt="" />
  <!-- 属性 -->
  <div id="app1" title="app1" class="myDiv" >
    这是&nbsp;&nbsp;&nbsp;app1
  </div>
  <div id="app2" class="myDiv myDiv1" style="color: red;">
    app2 这是一个div标签
    div标签是这样的<div></div>
    &lt;div&gt;&lt;/div&gt;
    <!-- 注释 -->
  </div>
  <div id="app3" title="app3">
    这是app3
  </div>
  <h1>一级标题</h1>
  <h2>二级标题</h2>

</body>
<style>
  #app3 {
    font-size: 24px;
    /* font-family: ; */
    /* font-weight: bold; */
    font-style: italic;
    text-align: center;
    /* color */
    /* text-shadow: ; */
    cursor: help;
  }

  #app1 {
    font-size: 20px;
    padding: 10px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding: 10px 5px 12px 15px;
    display: inline-block;
    width: 100px;
    height: 100px;
    /* visibility:hidden; */
    /* display:none; */
    /* opacity:0; */
  }

  .myDiv1 {
    border: 1px solid red !important;
  }

  .myDiv {
    border: 1px solid rgba(0, 0, 0, 0.599);
    
  }




  p {
    color: hotpink;
  }

  .myDiv,
  p,
  #div1 {
    background-color: aquamarine;
  }
</style>

</html>